<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="Template.css">
    <script src="../js/jquery-3.4.1.js"></script>
</head>
<body>
<div class="root">
    <div class="introduce">
        <span>transform属性用于控制2d转换, 第一个参数用于控制x轴偏移, 第二个参数用于控制y轴偏移, 偏移的起点一般位于左上方</span>
    </div>
    <div class="example">
        <div class="example-left">
            <ul>
                <li><input name="attributeControl" type="radio" value="1"/>transform: translate(0, 0)</li>
                <li><input name="attributeControl" type="radio" value="2"/>transform: translate(25px, 25px)</li>
                <li><input name="attributeControl" type="radio" value="3"/>transform: translate(-50%, -50%)</li>
                <li><input name="attributeControl" type="radio" value="4"/>transform: translate(50%, 50%)</li>
                <li><input name="attributeControl" type="radio" value="5"/>transform: rotate(90deg)</li>
                <li><input name="attributeControl" type="radio" value="6"/>transform: scale(2, 3)</li>
            </ul>
        </div>
        <div class="example-right">
            <div class="demo">我是demo</div>
            <hr class="x25" />
            <hr class="x50" />
            <hr class="x75" />
            <hr class="y25" />
            <hr class="y50" />
            <hr class="y75" />
        </div>
    </div>
    <div class="remarks">
        <span class="remarks-text"></span>
    </div>

</div>
<script type="text/javascript">

    $(function () {

        // 设置属性过渡
        $('.demo').css("transition", "transform 1s");

        $("input[name='attributeControl']").click(function () {
            const checkVal = $(this).val();
            $(".remarks-text").text("");
            switch (checkVal) {
                case "1":
                    $(".demo").css("transform", "translate(0, 0)");
                    break;
                case "2":
                    $(".demo").css("transform", "translate(25px, 25px)");
                    $(".remarks-text").text("这样设置相当于从左上角开始向下偏移10px并且向右偏移10px");
                    break;
                case "3":
                    $(".demo").css("transform", "translate(-50%, -50%)");
                    $(".remarks-text").text("这样设置相当于从左上角开始向上偏移自身高度的50%并且向左偏移自身宽度的50%");
                    break;
                case "4":
                    $(".demo").css("transform", "translate(50%, 50%)");
                    $(".remarks-text").text("这样设置相当于从左上角开始向下偏移自身高度的50%并且向右偏移自身宽度的50%");
                    break;
                case "5":
                    $(".demo").css("transform", "rotate(90deg)");
                    $(".remarks-text").text("这样设置的作用是控制元素根据轴心旋转, 如果参数值大于0则顺时针旋转, 小于0则逆时针旋转");
                    break;
                case "6":
                    $(".demo").css("transform", "scale(2, 3)");
                    $(".remarks-text").text("这样设置的作用是控制元素变大变小, 第一个参数是控制x轴放大倍数, 第二个参数控制y轴放大倍数");
                    break;
                default:
                    break;
            }
        });

    })

</script>
</body>
</html>